<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :node-data="companyInfo" :is-company="true" :get-department="getDepartment" @addDepartClick="addDepartClick" />
        <hr>
        <!-- 组织架构树状图 default-expand-all:是否展开树形结构 -->
        <el-tree :data="treeDate" default-expand-all>
          <template v-slot="scope">
            <!-- 使用子组件 -->
            <tree-tools
              :node-data="scope.data"
              :is-company="false"
              :get-department="getDepartment"
              @addDepartClick="addDepartClick"
              @editDepartClick="editDepartClick"
            />
          </template>
        </el-tree>
        <!-- 组织架构树状图 -->
      </el-card>

      <!-- 使用弹窗组件 -->
      <tree-dialong
        ref="dialong"
        :is-show-dialong="isShowDialong"
        :title="title"
        :node-data="nodeData"
        :get-department="getDepartment"
        @closeDialongClick="isShowDialong = false"
      />
      <!-- 使用弹窗组件 -->
    </div>
  </div>
</template>

<script>
// 引入组件
import TreeTools from '@/views/departments/components/tree-tools.vue'
import TreeDialong from '@/views/departments/components/tree-dialong.vue'
// 导入单独封装的listToTree函数  在utils中的index.js文件夹中封装
import { listToTree } from '@/utils'
// 导入组织架构请求接口
import { getDepartmentsAPI } from '@/api/departments'
export default {
  // 注册树形结构子组件
  components: {
    TreeTools,
    TreeDialong
  },
  data() {
    return {
      // 组织机构数据
      treeDate: [],
      companyInfo: {
        name: '贵州知邻生态科技有限公司',
        manager: '负责人',
        id: ''
      },
      // 弹窗显示与隐藏初始值false
      isShowDialong: false,
      // 暂存子组件tree-tools的数据
      nodeData: {},
      // 弹窗标题
      title: ''
    }
  },
  created() {
    // 组件创建完成后调用渲染组织架构数据函数
    this.getDepartment()
  },
  methods: {
    // 封装渲染组织架构数据函数
    async getDepartment() {
      // 发送请求，解构数据
      const { depts } = await getDepartmentsAPI()
      // 将获取到的数据保存到data的树形数据中
      this.treeDate = listToTree(depts, '')
    },
    // 添加子部门按钮子组件点击事件
    addDepartClick(nodeData) {
      // 修改弹窗标题
      this.title = '新增部门'
      // 显示弹窗
      this.isShowDialong = true
      // 接收子组件的数据暂存到data对应的数据中
      this.nodeData = nodeData
    },
    // 子组件tree-tools编辑部门点击事件
    editDepartClick(nodeData) {
      // 修改弹窗标题
      this.title = '编辑部门'
      // 传递数据集
      this.nodeData = nodeData
      // 调用子组件tree-dialong获取部门详细信息请求函数，同时传递对应的部门id
      this.$refs.dialong.getDepartDetail(this.nodeData.id)
      // 显示弹窗
      this.isShowDialong = true
    },
    // 子组件删除部门按钮点击事件
    delDepartClick(nodeData) {
      this.nodeData = nodeData
    }
  }
}
</script>

<style scope>
.cz{
  cursor: pointer;
}
</style>
